<template>
  <Panel title="交通态势" class="traffic-situation-wrapper" v-bind="$attrs">
    <!-- 左侧图表 -->
    <div class="pie-wrapper">
      <MChart id="pie-content" ref="pieChart" />
      <span class="pie-distance number">{{ state.unimpededRate || 100 }}%</span>
      <!-- <span class="pie-proportion">{{ state.sumDistance }}km</span> -->
    </div>

    <!-- 右侧拥挤程度 -->
    <div class="list">
      <div class="row">
        <div class="square"></div>
        <div class="degree">轻度拥堵</div>
        <div class="proportion">{{ state.hxDistanceRate || 0 }}%</div>
        <div class="distance">{{ state.hxDistance || 0 }}km</div>
      </div>
      <div class="row">
        <div class="square"></div>
        <div class="degree">中度拥堵</div>
        <div class="proportion">{{ state.ydDistanceRate || 0 }}%</div>
        <div class="distance">{{ state.ydDistance || 0 }}km</div>
      </div>
      <div class="row">
        <div class="square"></div>
        <div class="degree">重度拥堵</div>
        <div class="proportion">{{ state.jydDistanceRate || 0 }}%</div>
        <div class="distance">{{ state.jydDistance || 0 }}km</div>
      </div>
    </div>
  </Panel>
</template>
<script>
export default {
  name: 'Traffic'
}
</script>
<script setup>
/**
 * @desc 交通态势(一级)
 * @auther 邓清波
 * @date 22/10/20
 * **/
import { ref } from 'vue'
import Panel from '../../components/panel'
import * as echarts from 'echarts'
import trafficApi from '../../api/traffic'
import useDefaultEmits from '@/hooks/useDefaultEmits'
import useWatchStore from '@/hooks/useWatchStore'
import { useRoute } from 'vue-router'
import { positionTips } from '@/utils/chartPositionTips'

const route = useRoute()
const pieChart = ref(null) // 饼图实例
const state = ref({})

useDefaultEmits()
useWatchStore(getData)

// 饼图配置
function getOptions() {
  return {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'item',
      position: positionTips,
      formatter: function (data) {
        if (!data.name) return false

        // return `${data.name}:  ${data.value}km  ${data.percent}%`
        return `${data.name}: ${data.percent}%`
      }
    },
    legend: {
      top: 'center',
      left: 'center',
      show: false
    },
    color: ['#19bc6a', '#f53f3f'],
    series: [
      // 外圈
      {
        type: 'pie',
        radius: ['75%', '85%'],
        label: {
          show: false,
          position: 'center'
        },
        // minAngle: 5,
        avoidLabelOverlap: false,
        emphasis: {
          scale: true // 不缩放
          // scaleSize: 10 // 为了防止失效直接设置未0
        }, // 鼠标经过图标是否放大
        labelLine: {
          show: false
        },
        data: [
          {
            value: state.value.unimpeded || 100,
            name: '畅通'
          },
          {
            value: state.value.allYdDistance || 0,
            name: '拥堵'
          }
        ]
      },

      // 内圈
      {
        type: 'pie',
        radius: ['70%', '68.5%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: false, // 鼠标经过图标是否放大
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#d2e4ff'
            },
            {
              offset: 1,
              color: '#18bc6a'
            }
          ])
        },
        labelLine: {
          show: false
        },
        data: [100]
      }
    ]
  }
}

/**
 * 获取统计数据
 * **/
function getData(argParams, action) {
  const params = {
    roadType: argParams.roadType,
    province: '32',
    city: argParams.areaCode
  }
  trafficApi
    .getTrafficStatistic(params)
    .then(res => {
      state.value = res.data || {}
      console.log(' state.value', state.value)
    })
    .catch(e => {
      if (route.params.pageId == 'jjj') state.value.sumDistance = 11580
      else state.value.sumDistance = '--'
    })
    .finally(() => {
      pieChart.value.init(getOptions())
    })
}
</script>

<style lang="less" scoped>
@import url('../../styles/themes/variables.less');

/deep/ .mz-panel-content-main {
  flex-direction: row !important;
}

.traffic-situation-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
  cursor: pointer;

  .pie-wrapper {
    width: 33%;
    height: 100%;
    position: relative;
    margin-left: 5px;

    #pie-content {
      background: url(../../assets/images/traffic/traffic-pie-outer.png) no-repeat center;
      background-size: 100%;
    }

    .pie-distance {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 24px;
      font-weight: 700;
    }

    .pie-proportion {
      position: absolute;
      top: 53%;
      left: 50%;
      transform: translateX(-50%);
      color: #60d499;
      font-size: 14px;
    }
  }
}

.list {
  flex: 1;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-left: 5 px;
  font-family: Source Han Sans CN, Source Han Sans CN-Medium;

  & > .square {
    width: 12px !important;
    height: 12px;
    background-color: red;
    transform: rotate(135deg);
    margin-right: 10px;
  }

  .degree,
  .distance {
    flex: 10;
  }

  .proportion {
    flex: 8;
  }

  & > .square:nth-child(1) {
    background-color: @traffic-level-1 !important;
  }
}

.row:nth-child(1) {
  color: @traffic-level-1;

  .square-1 {
    background-color: @traffic-level-3;
  }
}

.row:nth-child(2) {
  color: @traffic-level-2;

  .square {
    background-color: @traffic-level-2 !important;
  }
}

.row:nth-child(3) {
  color: @traffic-level-3;

  .square {
    background-color: @traffic-level-3 !important;
  }
}
</style>
